<template>
    <div style="display: flex; flex-flow: row;justify-content: space-between;align-items: center;">
        <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>菜品管理</a-breadcrumb-item>
        </a-breadcrumb>
        <a-button type="primary" @click="showModal">添加菜品</a-button>
    </div>

    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <!-- 菜品内容表格 -->
        <a-table :columns="columns" :data-source="data">
            <template #headerCell="{ column }">
                <template v-if="column.key === 'name'">
                    <span>
                        <smile-outlined />
                        菜品名
                    </span>
                </template>
            </template>

            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                    <a>{{ record.name }}</a>
                </template>
                <template v-else-if="column.key === 'action'">
                    <span>
                        <a @click="deleteDish(record.id)">删除</a>
                        <a-divider type="vertical" />
                        <a>停售</a>
                    </span>
                </template>
                <!-- 时间格式化列 -->
                <template v-else-if="column.dataIndex === 'createTime'">
                    {{ formatDate(record.startTime) }}
                </template>
            </template>
        </a-table>
    </div>

    <!-- 新增菜品弹窗 -->
    <a-modal v-model:open="modalVisible" title="添加菜品" centered @ok="onSubmit">
        <a-form :model="dish" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="菜品名称">
                <a-input v-model:value="dish.name" />
            </a-form-item>
            <a-form-item label="价格">
                <a-input v-model:value="dish.price" />
            </a-form-item>
            <a-form-item label="描述">
                <a-textarea v-model:value="dish.desc" autoSize="true" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { SmileOutlined } from '@ant-design/icons-vue';
import { message, TablePaginationConfig } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue';
import { DishData } from '@/type/dish';
import DishDao from '@/daos/dish_dao';

const dishDao = new DishDao();

// 定义表格列
const columns = [
    {
        title: '菜品名',
        dataIndex: 'name',
        key: 'name',
        width: 100
    },
    {
        title: '价格',
        dataIndex: 'price',
        key: 'price',
        width: 50
    },
    {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
        width: 300
    },
    {
        title: '上架时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 80
    },
];

// 定义菜品数据
const data = ref([]);
const modalVisible = ref<boolean>(false);
const dish = reactive<DishData>({
    name: '',
    price: 1,
    desc: '',
});
// 新增弹窗的参数
const labelCol = { style: { width: '100px' } };
const wrapperCol = { style: { width: '250px' }, span: 14 };

// 初始化数据
onMounted(() => {
    init();
});

const init = async () => {
    let result = await dishDao.listAll();
    result.data.data.forEach((element: { key: any; id: any; price: any }) => {
        element.key = element.id.toString();
        element.price = element.price / 100;
    });
    data.value = result.data.data;
};

// 删除菜品
const deleteDish = async (dishId: number) => {
    let result = await dishDao.deleteDish(dishId);
    if (result.data.code === 200) {
        message.info(result.data.data);
        init();
    } else {
        message.error(result.data.msg);
    }
};

// 提交新增菜品
const onSubmit = async () => {
    try {
        let result = await dishDao.saveDish(dish);
        if (result.data.code === 200) {
            message.info(result.data.data);
            init();
            modalVisible.value = false;
        } else {
            message.error(result.data.msg);
            modalVisible.value = false;
        }
    } catch (error) {
        message.error("请求错误");
    }
};

// 显示新增菜品弹窗
const showModal = () => {
    modalVisible.value = true;
};

// 格式化日期
const formatDate = (date: Date) => {
    return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
};
</script>